<template>
	<view
		:style="'order:'+item.order+';'+item.css"
		class="box-swiper-list-user">
		<scroll-view scroll-x>
			<view
				class="_for"
				v-for="item in list"
				@click="$_to('user/detail?uid=' + item.uid)">
				<view class="_for-avatar">
					<view class="_for-avatar-image">
						<image :src="item.avatar" mode="widthFix"></image>
					</view>
					<view
						class="_for-avatar-roleName"
						:style="'background:'+item.nicknameColor+';'">
						{{item.roleName[0]}}
					</view>
				</view>
				<view class="_for-nickname">{{item.nickname}}</view>
				<view class="_for-post-follow">
					<text>帖子 {{item.stats.postPublishCount}}</text>
					<view>/</view>
					<text>粉丝 {{item.stats.followerCount?item.stats.followerCount:0}}</text>
				</view>
				<view class="_for-follow-button">
					<view
						:style="item.interaction.followStatus?'background: #409EFF;':''"
						@click.stop="cliclFollowButton(item.uid)">
						<text class="iconfont icon-add" :style="item.interaction.followStatus?'color: #FFF;':''"></text>
						<text class="_text" :style="item.interaction.followStatus?'color: #FFF;':''">
							{{item.interaction.followStatus?'已关注':'关注'}}
						</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"box-swiper-list-user",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				list:[],
				listStatus:"loading"
			};
		},
		mounted(){
			this.getList();
		},
		methods: {
			getList(){
				this.$_request(
					"GET", "/api/fresns/v1/user/list",
					{
						...this.item.query,
						"filterType":"whitelist",
						"filterKeys":"uid,avatar,nicknameColor,roleName,nickname,stats.postPublishCount,stats.followerCount,interaction.followStatus",
						"page":1
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = res.data.data.list;
							this.listStatus = "success";
						} else {
							this.listStatus = "empty";
						}
					}
				)
			},
			cliclFollowButton(uid){
				uni.showLoading();
				this.$_request(
					"POST","/api/fresns/v1/user/mark",
					{
						"markType":"follow",
						"type":"user",
						"fsid":uid
					},
					(res) => {
						uni.hideLoading();
						this.getList();
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
.box-swiper-list-user{
	padding: 25rpx;
	scroll-view{
		white-space: nowrap;
		._for{
			width: 300rpx;
			background: #FFF;
			margin: 0 25rpx 0 0;
			overflow: hidden;
			display: inline-block;
			padding: 50rpx 0;
			._for-avatar{
				width: 150rpx;
				height: 150rpx;
				margin: auto;
				position: relative;
				._for-avatar-image{
					width: 150rpx;
					height: 150rpx;
					border-radius: 1000rpx;
					overflow: hidden;
				}
				._for-avatar-roleName{
					font-size: 22rpx;
					line-height: 22rpx;
					background: $auxiliary;
					color: #FFF;
					position: absolute;
					z-index: 1;
					bottom: 0;
					right: 0;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 0 100rpx 100rpx 100rpx;
				}
			}
			._for-nickname{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				line-height: 32rpx;
				font-weight: bold;
				padding-top: 25rpx;
			}
			._for-post-follow{
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 22rpx;
				padding-top: 25rpx;
				text{
					font-size: 22rpx;
					color: $placeholder;
				}
				view{
					line-height: 22rpx;
					font-size: 22rpx;
					color: $placeholder;
					padding: 0 15rpx;
				}
			}
			._for-follow-button{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 50rpx;
				view{
					background: #FFF;
					line-height: 22rpx;
					padding: 10rpx 20rpx;
					border-radius: 100rpx;
					border: 1px solid $theme;
					text{
						color: $theme;
						font-size: 22rpx;
					}
					.icon-add{
						padding-right: 5rpx;
					}
				}
			}
		}
		._for:last-child{
			margin-right: 0;
		}
	}
}
</style>